<template>
  <div class="dynamic-posts-page">
    <header class="header">
      <div class="header-content">
        <h1>职为你来 - 动态广场</h1>
        <div class="search-container">
          <input
            v-model="searchQuery"
            placeholder="搜索帖子..."
            @input="handleSearch"
            class="search-input"
          />
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="search-icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
        </div>
      </div>
    </header>
    <main class="main-content">
      <div class="posts-container">
        <CreatePost @post-created="addNewPost" />
        <PostList
          :posts="filteredPosts"
          @load-more="loadMorePosts"
          @toggle-comments="toggleComments"
          :active-comment-id="activeCommentId"
        />
      </div>
      <div class="main-content-right">
        <aside class="sidebar">
          <div class="hot-topics">
            <h2>热门话题</h2>
            <ul>
              <li v-for="topic in hotTopics" :key="topic">{{ topic }}</li>
            </ul>
          </div>
        </aside>
        <div v-if="activeCommentId" class="comments-container">
          <CommentSection :post-id="activeCommentId" />
        </div>
        <div v-else class="rank-container">
          <RankingList></RankingList>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import CreatePost from './CreatePost.vue'
import PostList from './PostList.vue'
import CommentSection from './CommentSection.vue'
import RankingList from './RankingList.vue'

const posts = ref([
  {
    id: 1,
    author: {
      name: '张三',
      avatar: 'https://randomuser.me/api/portraits/men/1.jpg'
    },
    content:
      '我们公司正在招聘前端开发工程师，有兴趣的可以联系我！#招聘 #前端开发',
    images: [
      'https://picsum.photos/id/180/300/200',
      'https://picsum.photos/id/181/300/200'
    ],
    likes: 15,
    comments: 5,
    createdAt: '2023-05-20T10:30:00Z'
  },
  {
    id: 2,
    author: {
      name: '李四',
      avatar: 'https://randomuser.me/api/portraits/women/2.jpg'
    },
    content:
      '刚刚参加完一场很棒的技术分享会，学到了很多新知识！#技术分享 #学习',
    images: [
      'https://picsum.photos/id/190/300/200',
      'https://picsum.photos/id/191/300/200'
    ],
    likes: 20,
    comments: 8,
    createdAt: '2023-05-19T14:20:00Z'
  },
  {
    id: 2,
    author: {
      name: '李四',
      avatar: 'https://randomuser.me/api/portraits/women/2.jpg'
    },
    content:
      '刚刚参加完一场很棒的技术分享会，学到了很多新知识！#技术分享 #学习',
    images: [
      'https://picsum.photos/id/190/300/200',
      'https://picsum.photos/id/191/300/200'
    ],
    likes: 20,
    comments: 8,
    createdAt: '2023-05-19T14:20:00Z'
  }
])

const searchQuery = ref('')
const hotTopics = ref([
  '#前端开发',
  '#人工智能',
  // '#远程工作',
  '#职场技能',
  '#求职经验'
])
const activeCommentId = ref(null)

const filteredPosts = computed(() => {
  if (!searchQuery.value) return posts.value
  return posts.value.filter(
    (post) =>
      post.content.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      post.author.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

const addNewPost = (newPost) => {
  posts.value.unshift(newPost)
}

const handleSearch = () => {
  // 搜索逻辑已经在 computed 属性中实现
}

const loadMorePosts = () => {
  // 模拟加载更多帖子
  const newPosts = [
    {
      id: posts.value.length + 1,
      author: {
        name: '新用户',
        avatar: 'https://randomuser.me/api/portraits/men/5.jpg'
      },
      content: '这是一个新加载的帖子，展示了加载更多功能。',
      images: ['https://picsum.photos/id/1015/300/200'],
      likes: 0,
      comments: 0,
      createdAt: new Date().toISOString()
    }
  ]
  posts.value.push(...newPosts)
}

const toggleComments = (postId) => {
  activeCommentId.value = activeCommentId.value === postId ? null : postId
}
</script>

<style scoped>
.dynamic-posts-page {
  min-height: 100vh;
  background-image: linear-gradient(to bottom, #f1f6f8 0%, #eaf2f5 53%);
}

.header {
  background-color: #409eff;
  color: white;
  padding: 20px 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

h1 {
  margin: 0;
  font-size: 24px;
}

.search-container {
  position: relative;
  width: 300px;
}

.search-input {
  width: 100%;
  padding: 10px 40px 10px 10px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
}

.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #1e40af;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  gap: 20px;
}

.posts-container {
  flex: 1;
}

.sidebar {
  width: 300px;
}

.hot-topics {
  background-color: white;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hot-topics h2 {
  margin-top: 0;
  color: #1e40af;
}

.hot-topics ul {
  list-style-type: none;
  padding: 0;
}

.hot-topics li {
  margin-bottom: 10px;
  color: #4a5568;
}

@media (max-width: 1024px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: stretch;
  }

  .search-container {
    width: 100%;
    margin-top: 10px;
  }
}

.comments-container {
  position: sticky;
  top: 20px;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

@media (max-width: 1024px) {
  .comments-container {
    position: static;
    max-height: none;
  }
}
.rank-container {
  /* position: sticky; */
  top: 20px;
  background-color: white;
  border-radius: 8px;
  /* padding: 20px; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  max-height: calc(500vh - 40px);
  overflow-y: auto;
}
</style>
